<template>
	<view>
	 <u-notice-bar :bgColor="'#e45656'" :color="'rgb(255, 255, 255);'" :text="text1"   mode="closable"></u-notice-bar>
		<button type="default" plain open-type="contact" class="contact-box">
			<u-icon color="#53c21d" size="28" name="weixin-fill"></u-icon>
		</button>
		<view class="content">
			<mescroll-body ref="mescrollRef" @down="myErrandUp" @up="myErrandDown" v-if="tabIndex == 0">
				<view class="u-page">
					<view class="u-demo-block" v-for="(item,index) in myList" :key="item.id">
						<view class="u-demo-block__title">
							<view class="top-left-button">
								<u-tag size="mini" text="已完成" shape="circle" type="success"
									v-if="item.is_complete === '1'"></u-tag>
								<u-tag size="mini" text="等待顾客确认" shape="circle" type="warning"
									v-else-if="item.order_status === '1'"></u-tag>
								<u-tag size="mini" text="未完成" shape="circle" type="error" v-else></u-tag>
								<u-tag size="mini" text="帮送" shape="circle" type="success"
									v-if="item.methods === '0'"></u-tag>
								<u-tag size="mini" text="快递代拿" shape="circle" type="success"
									v-if="item.methods === '1'"></u-tag>
								<u-tag size="mini" text="帮买" shape="circle" type="success" v-if="item.methods === '2'"></u-tag>
								<u-tag size="mini" text="帮拿" shape="circle" type="success" v-if="item.methods === '3'"></u-tag>
								<u-tag size="mini" text="其他跑腿" shape="circle" type="success" v-if="item.methods === '4'"></u-tag>
							</view>
							<view class="top-right-time">
								{{$u.timeFormat((new Date(item.time.replace(new RegExp("-","gm"),"/"))).getTime())}}
							</view>
						</view>
						<view class="u-demo-block__content">
							<view class="album">
								<view>
									<u--image
										:src="item.pb_info ? item.pb_info : 'https://abc.apricity.asia/public/icon/1.jpg'"
										mode="aspectFit" height="40px" width="40px" :fade="true" duration="450"
				   			:shape="'circle'"></u--image>
								</view>
								<view class="album__content">
									<u--text :text="'跑腿信息:' + item.help_information" size="14"></u--text>
									<u--text margin="0 0 0 0" :text="'起点:' + item.pick_location" size="14"></u--text>
									<u--text margin="0 0 0 0"
										:text="'目的地:' + JSON.parse(item.address).address + JSON.parse(item.address).area"
										size="14"></u--text>
									<u--text margin="0 0 0 0" :text="'姓名:' + JSON.parse(item.address).name" size="14">
									</u--text>
									<u--text margin="0 0 0 0" @click="userCallPhone(item)"
										:text="'手机号:' + JSON.parse(item.address).mobile" size="14" suffixIcon="phone">
									</u--text>
									<u--text v-if="item.methods === '1'" margin="0 0 0 0"
										:text="'快递重量:' + item.postmethods" size="14"></u--text>
									<view class="postImg" v-if="item.img !== 'none' &&　item.methods === '1'">
										<u--text margin="0 0 0 0" text="取件码(点击图片可浏览)" size="14"></u--text>
										<u-album :urls="[item.img]"></u-album>
									</view>

									<u--text size="17" type="error" mode="price" :text="item.money"></u--text>
									<view class="errand-btn">
										<view class="errand-btn-left">

										</view>
										<view class="errand-btn-right">
											<view class="contact-box2">
												<block>
													<u-button @click="navaGoToChat(item)" shape="circle" size="mini"
														text="私信"
														color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
														 
													</u-button>
													<u-badge v-if="item.order_number === orderNumber" style="zIndex: 9999;" :absolute="true" :offset="[-5,0]" value="..." type="error"></u-badge>
												</block>
												
											</view>
											<view class="contact-box2"  v-if="item.order_status === '0'">
												<u-button @click="cancePay(item)" shape="circle" size="mini"
													text="退款"
													color="linear-gradient(to right, #F56C6C,#E45656)">
												</u-button>
											</view>
											<u-button v-if="item.order_status === '0'" @click="userConfirmSend(item.id)" type="primary" shape="circle"
												size="mini" text="确认送达"></u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['骑士订单'],
				myList: [],
				myPage: 1,
				text1: '用户确认收货，当天资金可以到账，否则，需要2天后',
				orderNumber: 0
			};
		},
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin], // 使用mixin
		onReachBottom() {
			if (this.tabIndex === 0) {
				uni.$u.throttle(this.getMyErrandData(), 500)
			}
		},
		onLoad(options) {
			if (options.orderNumber) {
				this.orderNumber = options.orderNumber
			}
		},
		methods: {
			cancePay (item) {
				uni.showModal({
					title: '退款',
					content: '您真的决定退款吗?',
					success: (res) => {
						if (res.confirm) {
							const {
								order_number,
								money
							} = item
							uniCloud.callFunction({
								name: 'wenxinreturn',
								data: {
									order_number: item.order_number,
									money: item.money,
									outRefundNo: item.order_number,
									action: 'return'
								},
								success: async (res) => {
									if (res.success) {
										// 操作成功
										const {
											data: res
										} = await uni.$http.post('/pay/qsPayCance', {
											order_number: item.order_number
										})
										console.log(res)
										if (res.status !== 200) return uni.showToast({
											icon: 'none',
											title: res.message,
											duration: 2000
										})
										uni.showToast({
											icon: 'none',
											title: '退款成功',
											duration: 4000
										})
									}
								},
								fail: (res) => {
									uni.showToast({
										icon: 'none',
										title: '退款失败,请联系管理员',
										duration: 4000
									})
								}
							})
						}
					}
				})
			},
			navaGoToChat(item) {
				let obj = {
					orderNumber: item.order_number,
					contactMethod: '1',
					publicAccounts: item.order_accounts,
					consumerAccounts: item.pb_accounts,
					accounts: item.order_accounts,
					methods: '1',
					pb_info: item.pb_info
				}
				uni.navigateTo({
					url: '../../chat/message/message?obj=' + JSON.stringify(obj)
				})
			},
			// 拨打电话
			userCallPhone(item) {
				uni.makePhoneCall({
					phoneNumber: JSON.parse(item.address).mobile,
					success: (res) => {

					},
					fail: (res) => {
						uni.setClipboardData({
							//准备复制的数据
						 data: JSON.parse(item.address).mobile + '',
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '复制手机号成功',
									duration: 2000
								});
						 }
						})
					}
				});
			},
			// 判断是否为骑士
			isErrand() {

			},
			// 我的订单触底
			myErrandDown(e) {
				uni.$u.throttle(this.getMyErrandData, 500, false)
			},
			// 我的订单上拉
			myErrandUp(e) {
				this.myList = []
				this.myPage = 1
				this.getMyErrandData()
			},
			// 获取我的订单
			async getMyErrandData() {
				const {
					data: res
				} = await uni.$http.get(`/order/checkuserapplyorder/${this.myPage}`)
				this.mescroll.endBySize(this.myPage * 10, res.total);
				if (res.status !== 0) return uni.showToast({
					title: res.message,
					duration: 1500,
					icon: 'none'
				})
				if (res.data.length === 0) return uni.showToast({
					title: '数据加载完毕...',
					duration: 1500,
					icon: 'none'
				})
				this.myList = [...this.myList, ...res.data]
				this.myPage++
			},
			// 骑士确认配送
			userConfirmSend(id) {
				let _this = this
				uni.showModal({
					title: '确认送达',
					content: '您真的已经完成了用户规定的跑腿任务吗?注意,如有虚假，我们将按照条例处理。',
					success: async (res) => {
						if (res.confirm) {
							const {
								data: res
							} = await uni.$http.get(`/order/postcheckshop/${id}`)
							if (res.status !== 0) return uni.showToast({
								title: '确认送达失败',
								duration: 1500,
								icon: 'none'
							})
							uni.showToast({
								title: '确认送达成功',
								duration: 1500,
								icon: 'none'
							})
							_this.myErrandUp()

						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.errand-btn-right {
		display: flex;

		.contact-box2 {
			position: relative;
			margin-right: 10px;
		}
	}

	//  微信客服按钮
	/deep/ .contact-box {
		border-radius: 50%;
		background: #c4c6c9 !important;
		z-index: 999;
		border: 0 !important;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 5%;
		bottom: 15%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.errand-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.u-demo-block__title {
		padding-right: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.top-left-button {
			display: flex;

			width: 60px;
			margin-bottom: 5px;
		}

		.top-right-time {
			color: #909399;
			font-size: 13px;
		}
	}

	.u-page {
		width: 95%;
		margin: 10px 2%;




	}

	.u-demo-block {
		margin-top: 10px;
		padding: 10px 5px;
		border-radius: 5px;
		background-color: #FFF;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}

	page {
		background-color: #f8f8f8;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>
